import React from "react";
import { useNavigate } from "react-router-dom";
import { Table, Space, notification } from "antd";
import { del_list } from "../../../../utils/api/index";
import type { ColumnsType } from "antd/es/table";
interface Props {
  depositlist: [];
}
function DepositListbtm(props: Props) {
  var navigate = useNavigate();
  interface DataType {
    key: React.Key;
    danhao: number;
    renyuan: string;
    cangku: string;
    time: string;
    shenheren: string;
    shenhetime: string;
    zhuangtai: string;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "出库单号",
      dataIndex: "danhao",
    },
    {
      title: "出库人员",
      dataIndex: "renyuan",
    },
    {
      title: "出库仓库",
      dataIndex: "cangku",
    },
    {
      title: "出库类型",
      dataIndex: "cangku",
    },
    {
      title: "申请出库时间",
      dataIndex: "time",
    },
    {
      title: "审核人",
      dataIndex: "shenheren",
    },
    {
      title: "审核时间",
      dataIndex: "shenhetime",
    },
    {
      title: "状态",
      dataIndex: "zhuangtai",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              del(record);
            }}
          >
            删除
          </a>
          <a
            onClick={() => {
              edit(record);
            }}
          >
            编辑
          </a>
          <a
            onClick={() => {
              details(record);
            }}
          >
            详情
          </a>
        </Space>
      ),
    },
  ];

  //编辑
  var edit = function (cs: any) {
    navigate("/index/home/deposit/depositList/editIssue", { state: cs });
  };
  var details = function (cs: any) {
    navigate("/index/home/deposit/depositList/details", { state: cs });
  };
  //删除
  var del = function (cs: any) {
    del_list(cs.id).then((res) => {
      // console.log(res.data);
      if (res.request.status == 200) {
        notification.success({ message: "删除成功" });
      }
    });
  };

  return (
    <div className="depositListbtm">
      <div className="main">
        <Table columns={columns} dataSource={props.depositlist} />
      </div>
    </div>
  );
}

export default DepositListbtm;
